<template>
    <xy-general-panel>
        <template #toolbar>
            <el-button icon="el-icon-plus" @click="addHandle" type="primary">添加</el-button>
        </template>

        <xy-collapse-search-bar>
            <el-form ref="searchForm" :inline="true" :rules="searchFormRules" :model="searchForm" label-width="80px"
                     @submit.native.prevent>
                <el-form-item prop="username">
                    <el-input placeholder="账号" v-model.trim="searchForm.username" maxlength="32"
                              @keyup.enter.native="refreshTable"></el-input>
                </el-form-item>
                <el-form-item prop="role">
                    <xy-role-select placeholder="请选择角色" v-model.trim="searchForm.role"
                                    @keyup.enter.native="refreshTable"
                                    :hideOptions="['ADMIN','AGENCY','BLOC']"></xy-role-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="refreshTable" icon="search">搜索</el-button>
                    <el-button @click="resetSearchForm">重置</el-button>
                    <el-button icon="fa fa-key btn-icon" @click="resetPassword" type="primary">密码重置</el-button>
                </el-form-item>
            </el-form>
        </xy-collapse-search-bar>

        <xy-user-info-table ref="userTable" :searchParam="searchForm" @onEdit="onEditHandle"
                            @rowClick="rowClickHandle"
                            @selectionChange="userTableSelectionChange"></xy-user-info-table>

        <el-dialog :title="dialogTitle" :visible.sync="formDialogVisible">
            <xy-user-info-form :method="formMethod" :entity="formEntity" :visible="formDialogVisible" :version="formVersion"
                               @submitSuccess="formSubmitSuccess"></xy-user-info-form>
        </el-dialog>

    </xy-general-panel>
</template>

<script>
    import xyUserInfoForm from './UserInfoForm';
    import xyUserInfoTable from './UserInfoTable';
    import xyRoleSelect from './select/RoleSelect';

    /**
     * 用户信息管理
     * @author Canaan
     * @date 2019/6/18 14:00.
     */
    export default {
        name: 'UserInfoIndex',
        mounted() {

        },
        components: {
            xyUserInfoForm,
            xyUserInfoTable,
            xyRoleSelect
        },
        props: {},
        data() {
            return {
                selectRows: [],           //选中行
                searchFormRules: {
                    username: [
                        {min: 4, max: 32, message: '长度在 4 到 32 个字符', trigger: 'blur'},
                        {validator: this.verify.isUserName, trigger: 'blur'}
                    ],
                },
                searchForm: {
                    username: null,
                    role: null
                },
                formEntity: {
                    id: null
                },
                formVersion: null,
                formDialogVisible: false,
                formMethod: "POST",
            }
        },
        computed: {
            dialogTitle() {
                return (this.formMethod === "POST" ? "添加" : "修改") + "用户";
            }
        },
        methods: {
            /**
             * 表格行单击事件
             */
            rowClickHandle(row, event, column) {
                this.selectRows = [row];
            },
            /**
             * 表格选中
             */
            userTableSelectionChange: function (val) {
                this.selectRows = val;
            },
            /**
             * 密码重置
             */
            resetPassword: function () {
                if (this.selectRows.length === 0) {
                    this.$message.info('请选择要重置的用户');
                    return;
                } else if (this.selectRows.length !== 1) {
                    this.$message.info('只能选取一名用户');
                    return;
                }
                let userId = this.selectRows[0].id;
                let _this = this;
                this.$prompt('', '请输入重置的密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPlaceholder: '默认为1 23456'
                }).then(({value}) => {
                    _this.$ajax.put('user_info/reset_password', {
                        id: userId,
                        password: value
                    }).then(res => {
                        if (!(res.code === "0" || res.code === "ok")) {
                            _this.$message.error(res.msg);
                        }
                    })
                }).catch(() => {
                });

            },
            addHandle() {
                this.formVersion = 'add';
                this.formMethod = "POST";
                this.formDialogVisible = true;
            },
            refreshTable() {
                this.$refs.userTable.loadData();
            },
            resetSearchForm() {
                this.$refs.searchForm.resetFields();
                this.refreshTable();
            },
            onEditHandle(entity) {
                this.formEntity = {
                    id: entity.id
                };
                this.formVersion = Math.uuid();
                this.formMethod = "PUT";
                this.formDialogVisible = true;
            },
            formSubmitSuccess() {
                this.refreshTable();
                this.formDialogVisible = false;
            }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>